<!DOCTYPE html>
<html class="pixel-ratio-3 retina android android-5 android-5-1-1">
<head>
    <title>问诊单-详情填写</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="description" content="">
    <link rel="stylesheet" href="/plugins/fontaw/css/font-awesome.css">
    <style>
        a{color: grey; text-decoration: none}
        body{margin: 0rem;padding:0rem;background:#f7f7f5 ;}
        header{ top: 0rem;text-align: center;width: 100%;background-color: white;
            bottom:0.5rem;padding-bottom: 0.5rem}
        .guider-num{list-style: none;margin: 0rem;padding:0rem;margin-top:0.5rem}
        .guider-num li{
            border:#cccccc 1px solid;
            border-radius: 50%;
            display: inline-flex;
            width: 1.5rem;height: 1.5rem;
        }
        .guider-num li a{
            color:#e1e1e1;
            text-align: center;
            width:100%;height: 100%;
            line-height: 1.5rem;
        }
        .active-num-active{background-color: #1aad19;}
        .active-num-active a{color: white}
        .guider-pannel{display: none;background-color: white;height: 100%;padding-top:0.5rem}
        .active{display: block}
        .subject-items{ padding:1rem;font-size:0.8rem}
        .subject-items h3{height: 1.5rem;font-weight: unset;text-align: left;border-bottom:#e1e1e1 solid 1px}
        .items{list-style: none;margin:0rem;padding:0rem;display: flex;flex-wrap: wrap}
        .items li{flex: 33%;margin-bottom: 1rem}
        .subject-btns{display:flex;justify-content:center }
        .subject-btns a{}
        .btn{flex:0.5;margin:0rem 1rem;text-align: center;background-color: #1aad19;height: 2rem;line-height: 2rem;color: white;margin-bottom: 2rem}
        .tip{ background-color: #fde388;padding:1rem 2rem;font-size:0.8rem;color: #e78935;text-align: left;}
        .tip ul{margin: 0px;padding:0px}
        .level1{margin:0.5rem 0rem}
    </style>
</head>
<body >
    <div class="tip" style="display: none">
            <ul>
                <li>以下为题均指当前症状。以往症状可在后面空白处不出填写并注明以往。</li>
                <li>急性病以填写时情况为准，慢性病以近三天情况为准。</li>
                <li>详细填写问诊单能版主医生更好地了解您的身体状况</li>
            </ul>
    </div>
    <header id="templateData">

    </header>
<script src="/lib/jquery-2.1.4.js"></script>

<script>
    var index = 1;
    var tabNums = $(".guider-num li").length;
    var flag = true;
    var data = "{'subjectCode':'";
    function cutTab(index){
        move(index);
    }

    /*$(".guider-num li").click(function(){
        index  = parseInt($(this).find("a").text());
        move(index);
    });*/
    function move(ind){
        index = ind;
        console.log(index);
        $(".guider-num li").removeClass("active-num-active");
        $(".guider-num li").eq(ind-1).addClass("active-num-active");

        $(".level1").css("display","none");
        $(".title"+ind).css("display","inline-block");
        $(".guider-pannel").each(function(){
            if($(this).hasClass("active")){
                $(this).removeClass("active");
            }
        });
            if(ind!=1)
                $(".tip").hide();
             else
                $(".tip").show();

        $("#tab"+ind).addClass("active");

        if(flag) {
            $.ajax({
                url: "/template/getListByTemplate",
                type: "post",
                dataType: "json",
                data: {"templateId": 1},
                success: function (result) {
                    console.log("ajax成功");
                    var templateList = "";              // 定义存储模板数据的变量
                    var length = result.data.length;    // 定义存储一级分类列表长度的变量
                    var num = "";                       // 定义存储序号内容的变量
                    var level2List = "";                // 定义存储二级分类内容的变量
                    // 迭代一级分类列表
                    $(result.data).each(function (i) {
                        console.log(i + "》》》" + this.content);
                        // 验证当前一级分类下标对应的标题是否需要显示
                        if (i == index - 1) {
                            templateList += "<span class='level1 title"+(i+1)+"' style='display: inline-block'>" + this.content + "</span>";
                        } else {
                            templateList += "<span class='level1 title"+(i+1)+"' style='display: none'>" + this.content + "</span>";
                        }
                        // 初次进入循环，添加序号外层ul开始标签
                        if (i == 0) {
                            num += "<ul class='guider-num'>";
                        }
                        // 验证当前序号是否需要激活选中
                        if (i == index - 1) {
                            num += "<li class='active-num-active'><a href='javascript:;' onclick='cutTab(" + (i + 1) + ")'>" + (i + 1) + "</a></li>";
                        } else {
                            num += "<li><a href='javascript:;' onclick='cutTab(" + (i + 1) + ")'>" + (i + 1) + "</a></li>";
                        }
                        console.log("size:" + length);
                        tabNums = length;
                        // 结束循环，追加序号外层ul结束标签
                        if (i == length - 1) {
                            num += "</ul>";
                            templateList += num;
                        }
                        // 验证二级分类是否需要选中
                        if (i == index - 1) {
                            level2List += "<section id='tab" + (i+1) + "' class='guider-pannel active'>";
                        } else {
                            level2List += "<section id='tab" + (i+1) + "' class='guider-pannel'>";
                        }
                        level2List += "<div class='subject-items'>";
                        // 循环二级分类列表
                        $(this.level2List).each(function (i) {
                            //console.log("》》》》》"+this.content);
                            level2List += "<h3>" + this.content + "</h3>";
                            var itemType = "radio";
                            var subjectCode = this.categoryCode;
                            if (this.categoryType == "多选") {
                                itemType = "checkbox";
                            } else if (this.categoryType == "简单") {
                                itemType = "textarea";
                            }

                            if (itemType == "textarea") {
                                level2List += "<div><textarea id='"+this.categoryCode+"' rows='4' style='width: 100%'></textarea><span>0/200</span></div>";
                            } else {
                                level2List += "<div><ul class='items'>";
                                // 循环三级分类列表
                                $(this.level3List).each(function () {
                                    //console.log("》》》》》》》》"+this.itemTitle);
                                    level2List += "<li ><label><input type='" + itemType + "' name='"+this.categoryCode+"' value='"+this.itemCode+"'/>" + this.itemTitle + "</label></li>";
                                })
                                level2List += "</ul></div>";
                            }
                        });
                        if (i == length - 1) {
                            level2List += "   </div><div class='subject-btns'><a class='btn pre' href='javascript:preStep()'>上一步</a><a class='btn next' href='javascript:submitStep()'>提交</a> </div> </section>";
                        }else{
                            level2List += "   </div><div class='subject-btns'><a class='btn pre' href='javascript:preStep()'>上一步</a><a class='btn next' href='javascript:nextStep()'>下一步</a> </div> </section>";
                        }
                    });

                    $("#templateData").html(templateList);  // 显示以及分类到头部
                    $("#templateData").after(level2List);   // 显示二级与三级分类
                    flag = false;

                    loadTip();
                }, error: function () {
                    console.log("ajax出错");
                }
            });
        }
    }

    function loadTip(){
        $("#templateData").prepend($(".tip").show());
    }

    function preStep(){
        if(--index>0){
            move(index)
        }
    }
    function nextStep(){
        if(++index<=tabNums){
            move(index)
        }
    }
    function submitStep(){
        // 获取表单对象
        var myForm = document.getElementsByTagName("form")[0]
        // 获取表单中的单选按钮列表
        var radioList = $("[type='radio']");
        var checkboxList = $("[type='checkbox']");
        var textList = $("textarea");
        var textValueList = "";
        for(var i=0; i< textList.length; i++){
            if(textList[i].value!=''){
                textValueList +=textList[i].getAttribute("id")+"-"+textList[i].value+",";
            }
        };
        var radioValueList="";
        for(var i=0; i< radioList.length; i++){
            if(radioList[i].checked){
                radioValueList += radioList[i].value+",";
                //console.log(radioList[i].value);
            }
        };
        var checkboxValueList="";
        for(var i=0; i< checkboxList.length; i++){
            if(checkboxList[i].checked){
                checkboxValueList += checkboxList[i].value+",";
                //console.log(checkboxList[i].value);
            }
        };
        console.log("-----"+textValueList);
        var inquiryId=$("#inquiryId").val();
        var data ={"radioValue":radioValueList,"checkboxValue":checkboxValueList,"textValue":textValueList};
        $.ajax({
           url:"/inquiry/addAnswersItem",
            type:"post",
            dataType:"json",
            data:data,
            success:function(result){
                console.log(result.msg);
            },error:function(){
                console.log("ajax有错");
            }
        });
    }
    window.onload=move(1);
</script>
</body>
</html>